<template>
    <div class="main">
        <el-header class="case-type-header">
            <i class="el-icon-eleme">选择案件类型</i>
        </el-header>
        <el-divider></el-divider>
        <div class="parent_type">
            <el-button class="parent-btn"
                    :key="parent.id"
                    v-for="parent in parentList"
                    :value="parent.id"
                    @click="handleChangeParent(parent.id,parent.caseTypeName,parent.typeMoneyMin)"
                    plain>
                {{parent.caseTypeName}}
            </el-button>
        </div>
        <el-divider></el-divider>
        <div class="child_type">
            <el-button class="type-btn"
                    :key="type.id"
                    v-for="type in typeList"
                    :value="type.id"
                    @click="handleChoseType(type.id)"
                    plain>
                {{type.caseTypeName}}
            </el-button>
        </div>
    </div>
</template>

<script>
    //引入service
    import CaseTypeService from '../../../model/gs/CaseTypeService.js'
    //获得实例
    const caseTypeService = CaseTypeService.getInstance()

    export default {
        data() {
            return {
                parentList:[],
                typeList:[],
                caseNo:'',
                typeMoneyMin:'',
                parentId:''
            }
        },
        methods:{
            handleChangeParent(id,caseTypeName,typeMoneyMin){
                //保存父id
                this.parentId = id
                //保存标的金额
                this.typeMoneyMin = typeMoneyMin
                //保存父类型的第一个字
                this.caseNo = '('+caseTypeName.substring(0,1)+')'
                this.getTypeList(id)
            },
            handleChoseType(id){
                this.$emit('setType',id,this.caseNo,this.typeMoneyMin,this.parentId)
            },
            getParentList(){
                caseTypeService.parentList().then(response => {
                    response.data.data.forEach(item => {
                        if(item.id != 1011){
                            this.parentList.push(item)
                        }
                    })
                })
            },
            getTypeList(id){
                caseTypeService.childrenList(id).then(response => {
                    this.typeList = response.data.data
                })
            }
        },
        created() {
            this.getParentList()
        }
    }
</script>

<style scoped>
    .parent_type,.child_type{
        width: 100%;
    }
    .case-type-header{
        position: relative;
        font-size: 30px;
        top: 20px;
        left: -10px;
    }
    .type-btn{
        margin-left: 10px;
        margin-top: 10px;
    }
    .parent_type{
        padding-left: 10px;
    }
</style>
